import React, { Component } from 'react'

export default class DianZhan extends Component {

    constructor(){
        super()
        this.state = {
            isDianZhan: false
        }
    }

    dianZhan = () => {
        // 第一种方式修改state的状态，通过setState重新传入先的参数对象
        // this.setState({
        //     isDianZhan: !this.state.isDianZhan
        // })
        // 第二种通过函数可以获取上次的state和props对象(如果该主键有props传递时候)
        this.setState(( prevState, prevProps) => {
            console.log(prevState)
            console.log("(后执行，因为是异步)我是this.state内部的isDianZhan=", this.state.isDianZhan)
            return {
                isDianZhan: !prevState.isDianZhan
            }
        }, 
        () =>{
            console.log("由于setState动作改变组件状态是异步的，获取最终最新状态要添加这个回调函数获取=",this.state.isDianZhan)
        }
        )
        console.log("(先执行，方法执行到this.setState就进行异步，继续下面的)我是this.state外部的的isDianZhan=", this.state.isDianZhan)
    }
    

    render() {
        return (
            <div>
                <span onClick={this.dianZhan}>
                {
                    // 表情网站https://emojipedia.org/
                    this.state.isDianZhan ? '赞👍' : '垃圾👎'
                }
                </span>
            </div>
        )
    }
}
